﻿<!-- 
Filename: RotateVerticalTheme.xaml
Version: 20150108
-->
  
<ResourceDictionary
 xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
 xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
 xmlns:local="clr-namespace:FlipPanel;assembly=FlipPanel">

  <ControlTemplate x:Key="FlipPanel_RotateVerticalTemplate" TargetType="local:FlipPanel">
    <Grid Name="LayoutRoot"
      HorizontalAlignment="{TemplateBinding HorizontalAlignment}"
      VerticalAlignment="{TemplateBinding VerticalAlignment}"
      >
      <!-- need LayoutRoot to hold (and programmatically find) the VSM-->

      <VisualStateManager.VisualStateGroups>
        <VisualStateGroup x:Name="ViewStates">
          <VisualStateGroup.Transitions>

            <VisualTransition To="Normal" From="Flipped" GeneratedDuration="0:0:0.5">
              <Storyboard>
                <DoubleAnimation Storyboard.TargetName="BackContentProjection"
                                 Storyboard.TargetProperty="RotationX" To="-90" Duration="0:0:0.25"></DoubleAnimation>
                <DoubleAnimation Storyboard.TargetName="FrontContentProjection" BeginTime="0:0:0.25"
                                 Storyboard.TargetProperty="RotationX" To="0" Duration="0:0:0.25"></DoubleAnimation>
              </Storyboard>
            </VisualTransition>

            <VisualTransition To="Flipped" From="Normal" GeneratedDuration="0:0:0.5">
              <Storyboard>
                <DoubleAnimation Storyboard.TargetName="FrontContentProjection"
                                 Storyboard.TargetProperty="RotationX" To="90" Duration="0:0:0.25"></DoubleAnimation>
                <DoubleAnimation Storyboard.TargetName="BackContentProjection" BeginTime="0:0:0.25"
                                 Storyboard.TargetProperty="RotationX" To="0" Duration="0:0:0.25"></DoubleAnimation>
              </Storyboard>
            </VisualTransition>

          </VisualStateGroup.Transitions>

          <VisualState x:Name="Normal">
            <Storyboard>
              <DoubleAnimation Storyboard.TargetName="BackContentProjection"
                               Storyboard.TargetProperty="RotationX" To="-90" Duration="0:0:0"></DoubleAnimation>
            </Storyboard>
          </VisualState>

          <VisualState x:Name="Flipped">
            <Storyboard>
              <DoubleAnimation Storyboard.TargetName="FrontContentProjection"
                               Storyboard.TargetProperty="RotationX" To="90" Duration="0:0:0"></DoubleAnimation>
            </Storyboard>
          </VisualState>
        </VisualStateGroup>
      </VisualStateManager.VisualStateGroups>

      <Grid.RowDefinitions>
        <RowDefinition Height="*" />
      </Grid.RowDefinitions>

      <!-- This is the front content. -->

      <Border Grid.Row="0" 
              BorderBrush="{TemplateBinding BorderBrush}"
              BorderThickness="{TemplateBinding BorderThickness}"
              CornerRadius="{TemplateBinding CornerRadius}"
              Background="{TemplateBinding Background}">

        <Border.Projection>
          <PlaneProjection x:Name="FrontContentProjection"></PlaneProjection>
        </Border.Projection>

        <ContentPresenter Content="{TemplateBinding FrontContent}" 
                          HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
                          VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
                          />

      </Border>

      <!-- This is the back content. -->

      <Border Grid.Row="0" 
              BorderBrush="{TemplateBinding BorderBrush}"
              BorderThickness="{TemplateBinding BorderThickness}"
              CornerRadius="{TemplateBinding CornerRadius}"
              Background="{TemplateBinding Background}">

        <Border.Projection>
          <PlaneProjection x:Name="BackContentProjection"></PlaneProjection>
        </Border.Projection>

        <ContentPresenter Content="{TemplateBinding BackContent}" 
                          HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
                          VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
                          />

      </Border>

    </Grid>

  </ControlTemplate>

  <Style x:Key="FlipPanel_RotateVerticalStyle" TargetType="local:FlipPanel">
    <Setter Property="Template" Value="{StaticResource FlipPanel_RotateVerticalTemplate}"/>
  </Style>

</ResourceDictionary>
  